<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Web Periodic Background Synchronization</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/BackgroundSync/spec/PeriodicBackgroundSync-index.html" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Web Periodic Background Synchronization</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/BackgroundSync/spec/PeriodicBackgroundSync-index.html">https://wicg.github.io/BackgroundSync/spec/PeriodicBackgroundSync-index.html</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:nator@chromium.org">Mugdha Lakhani</a> (<span class="p-org org">Google</span>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:jakearchibald@chromium.org">Jake Archibald</a> (<span class="p-org org">Google</span>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Web Periodic Background Synchronization Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification describes a method that enables web applications to periodically synchronize data and content in the background.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#example"><span class="secno">1.1</span> <span class="content">Example</span></a>
     </ol>
    <li><a href="#concepts"><span class="secno">2</span> <span class="content">Concepts</span></a>
    <li><a href="#extensions-to-service-worker-registration"><span class="secno">3</span> <span class="content">Extensions to service worker registration</span></a>
    <li>
     <a href="#constructs"><span class="secno">4</span> <span class="content">Constructs</span></a>
     <ol class="toc">
      <li><a href="#periodic-sync-registration-construct"><span class="secno">4.1</span> <span class="content">Periodic sync registration</span></a>
      <li><a href="#periodic-sync-scheduler-construct"><span class="secno">4.2</span> <span class="content"><span>Periodic Sync Scheduler</span></span></a>
      <li><a href="#constants"><span class="secno">4.3</span> <span class="content">Constants</span></a>
     </ol>
    <li>
     <a href="#privacy"><span class="secno">5</span> <span class="content">Privacy Considerations</span></a>
     <ol class="toc">
      <li><a href="#permission"><span class="secno">5.1</span> <span class="content">Permission</span></a>
      <li><a href="#location-tracking"><span class="secno">5.2</span> <span class="content">Location Tracking</span></a>
      <li><a href="#history-leaking"><span class="secno">5.3</span> <span class="content">History Leaking</span></a>
     </ol>
    <li><a href="#security"><span class="secno">6</span> <span class="content">Security Considerations</span></a>
    <li><a href="#resources"><span class="secno">7</span> <span class="content">Resource Usage</span></a>
    <li>
     <a href="#algorithms"><span class="secno">8</span> <span class="content">Algorithms</span></a>
     <ol class="toc">
      <li><a href="#process-periodic-sync-registrations-algorithm"><span class="secno">8.1</span> <span class="content"><span>Process periodic sync registrations</span></span></a>
      <li><a href="#responding-to-permission-revocation-algorithm"><span class="secno">8.2</span> <span class="content"><span>Respond to permission revocation</span></span></a>
     </ol>
    <li>
     <a href="#api-description"><span class="secno">9</span> <span class="content">API Description</span></a>
     <ol class="toc">
      <li><a href="#extensions-to-serviceworkerglobalscope"><span class="secno">9.1</span> <span class="content">Extensions to the <code class="idl"><span>ServiceWorkerGlobalScope</span></code> interface</span></a>
      <li><a href="#extensions-to-serviceworkerregistration"><span class="secno">9.2</span> <span class="content">Extensions to the <code class="idl"><span>ServiceWorkerRegistration</span></code> interface</span></a>
      <li><a href="#periodicsyncmanager-interface"><span class="secno">9.3</span> <span class="content"><code class="idl"><span>PeriodicSyncManager</span></code> interface</span></a>
      <li>
       <a href="#periodicsync-event-interface"><span class="secno">9.4</span> <span class="content">The <span>periodicsync event</span></span></a>
       <ol class="toc">
        <li><a href="#firing-a-periodicsync-event"><span class="secno">9.4.1</span> <span class="content"><span>Fire a periodicsync event</span></span></a>
       </ol>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>Web Applications often run in environments with unreliable networks (e.g., mobile phones) and unknown lifetimes (the browser might be killed or the user might navigate away).
  This makes it difficult for web apps to keep their content and state in sync with servers.</p>
   <p>This API is intended to reduce the time between content creation and content synchronization between the servers and the web app. It does so by letting the web app register an intent to periodically synchronize state and data, with a minimum interval it wishes to do so at. Through a service worker event, the user agent then periodically lets the web app download network resources and update state.</p>
   <p>As this API relies on service workers, functionality provided by this API is only available in a <a data-link-type="dfn" href="https://w3c.github.io/webappsec-secure-contexts/#secure-contexts" id="ref-for-secure-contexts">secure context</a>.</p>
   <h3 class="heading settled" data-level="1.1" id="example"><span class="secno">1.1. </span><span class="content">Example</span><a class="self-link" href="#example"></a></h3>
    Registering periodic background sync at a mininimum interval of one day from a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a>: 
<pre class="lang-js highlight">async <c- a>function</c-> registerPeriodicNewsCheck<c- p>()</c-> <c- p>{</c->
  <c- kr>const</c-> registration <c- o>=</c-> await navigator<c- p>.</c->serviceWorker<c- p>.</c->ready<c- p>;</c->
  <c- k>try</c-> <c- p>{</c->
    await registration<c- p>.</c->periodicSync<c- p>.</c->register<c- p>(</c-><c- t>'fetch-news'</c-><c- p>,</c-> <c- p>{</c->
      minInterval<c- o>:</c-> <c- mi>24</c-> <c- o>*</c-> <c- mi>60</c-> <c- o>*</c-> <c- mi>60</c-> <c- o>*</c-> <c- mi>1000</c-><c- p>,</c->
    <c- p>});</c->
  <c- p>}</c-> <c- k>catch</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>'Periodic Sync could not be registered!'</c-><c- p>);</c->
  <c- p>}</c->
<c- p>}</c->
</pre>
   <p>Reacting to a <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event">periodicsync event</a> within a <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker" id="ref-for-dfn-service-worker">service worker</a>:</p>
<pre class="lang-js highlight">self<c- p>.</c->addEventListener<c- p>(</c-><c- t>'periodicsync'</c-><c- p>,</c-> event <c- p>=></c-> <c- p>{</c->
  event<c- p>.</c->waitUntil<c- p>(</c->fetchAndCacheLatestNews<c- p>());</c->
<c- p>});</c->
</pre>
   <p>In the above example <code>fetchAndCacheLatestNews</code> is a developer-defined function is a developer-defined function that fetches the latest news articles from a server and stores them locally, for example using the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#cache" id="ref-for-cache">Cache</a></code> API, for offline consumption.</p>
   <h2 class="heading settled" data-level="2" id="concepts"><span class="secno">2. </span><span class="content">Concepts</span><a class="self-link" href="#concepts"></a></h2>
   <p>When a <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①">periodicsync event</a> is fired for a <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration">periodic sync registration</a> <var>registration</var>, it is considered to run <dfn class="dfn-paneled" data-dfn-for="periodicsync event" data-dfn-type="dfn" data-noexport id="periodicsync-event-in-the-background">in the background</dfn> if no <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client" id="ref-for-dfn-service-worker-client">service worker clients</a> whose <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client-frame-type" id="ref-for-dfn-service-worker-client-frame-type">frame type</a> is "<code>top-level</code>", "<code>auxiliary</code>" or "<code>nested</code>" exist for the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin">origin</a> of the <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration">service worker registration</a> associated with <var>registration</var>.</p>
   <h2 class="heading settled" data-level="3" id="extensions-to-service-worker-registration"><span class="secno">3. </span><span class="content">Extensions to service worker registration</span><a class="self-link" href="#extensions-to-service-worker-registration"></a></h2>
    A <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration" id="ref-for-dfn-service-worker-registration">service worker registration</a> additionally has: 
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-periodic-sync-registrations">Active periodic sync registrations</dfn> (a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a>), where each key is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString">DOMString</a></code>, and each item is a <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration①">periodic sync registration</a>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="periodic-sync-processing-queue">Periodic sync processing queue</dfn>, initially the result of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#starting-a-new-parallel-queue" id="ref-for-starting-a-new-parallel-queue">starting a new parallel queue</a>.</p>
   </ul>
   <h2 class="heading settled" data-level="4" id="constructs"><span class="secno">4. </span><span class="content">Constructs</span><a class="self-link" href="#constructs"></a></h2>
   <h3 class="heading settled" data-level="4.1" id="periodic-sync-registration-construct"><span class="secno">4.1. </span><span class="content">Periodic sync registration</span><a class="self-link" href="#periodic-sync-registration-construct"></a></h3>
    A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="periodic-sync-registration">periodic sync registration</dfn> consists of: 
   <div>
     A <dfn class="dfn-paneled" data-dfn-for="periodic sync registration" data-dfn-type="dfn" data-noexport id="periodic-sync-registration-service-worker-registration">service worker registration</dfn>, which is a <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration" id="ref-for-dfn-service-worker-registration①">service worker registration</a>. 
    <p>A <dfn class="dfn-paneled" data-dfn-for="periodic sync registration" data-dfn-type="dfn" data-noexport id="periodic-sync-registration-tag">tag</dfn>, which is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①">DOMString</a></code>.</p>
    <p class="note" role="note"><span>Note:</span> Periodic Background Sync doesn’t share namespace with Background Sync, so an <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①">origin</a> can have registrations of both types with the same tag.</p>
    <p><dfn class="dfn-paneled" data-dfn-for="periodic sync registration" data-dfn-type="dfn" data-noexport id="periodic-sync-registration-minimum-interval">minimum interval</dfn> (a long long), which is used to specify the minimum interval, in milliseconds, at which the periodic synchronization should happen. <a data-link-type="dfn" href="#periodic-sync-registration-minimum-interval" id="ref-for-periodic-sync-registration-minimum-interval">minimum interval</a> is a suggestion to the user agent.</p>
    <p class="note" role="note"><span>Note:</span> The actual interval at which <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②">periodicsync events</a> are fired MUST be greater than or equal to this.</p>
    <p>An <dfn class="dfn-paneled" data-dfn-for="periodic sync registration" data-dfn-type="dfn" data-noexport id="periodic-sync-registration-anchor-time">anchor time</dfn> (a timestamp), the previous time a <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event③">periodicsync event</a> fired for this <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration②">periodic sync registration</a>, or the time of initial registration.</p>
    <p>A <dfn class="dfn-paneled" data-dfn-for="periodic sync registration" data-dfn-type="dfn" data-noexport id="periodic-sync-registration-state">state</dfn>, which is one of "<code>pending</code>", "<code>firing</code>", "<code>suspended</code>" or "<code>reregistered-while-firing</code>". It is initially set to "<code>pending</code>".</p>
   </div>
   <h3 class="heading settled" data-level="4.2" id="periodic-sync-scheduler-construct"><span class="secno">4.2. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="periodic-sync-scheduler">Periodic Sync Scheduler</dfn></span><a class="self-link" href="#periodic-sync-scheduler-construct"></a></h3>
    The <a data-link-type="dfn" href="#periodic-sync-scheduler" id="ref-for-periodic-sync-scheduler">periodic sync scheduler</a> is responsible for scheduling firing of <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event④">periodicsync events</a>.
In response to these triggers, the scheduler either schedules delayed processing to fire a <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event⑤">periodicsync event</a> at the appropriate time in the future, or cancels such scheduling. 
   <div> The <a data-link-type="dfn" href="#periodic-sync-scheduler" id="ref-for-periodic-sync-scheduler①">periodic sync scheduler</a> has a <dfn class="dfn-paneled" data-dfn-for="periodic sync scheduler" data-dfn-type="dfn" data-noexport id="periodic-sync-scheduler-time-of-last-fire">time of last fire</dfn>, a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map①">map</a>, where each key is an <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②">origin</a>, and each item is a timestamp. The keys of this map are the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin③">origins</a> associated with the <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration①">service worker registrations</a> of <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations">active periodic sync registrations</a>. This is initially an empty <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map②">map</a>. </div>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effective-minimum-sync-interval-for-origin">effective minimum sync interval for origin</dfn> <var>origin</var> (an <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin④">origin</a>), is the <a data-link-type="dfn" href="#minimum-periodic-sync-interval-for-any-origin" id="ref-for-minimum-periodic-sync-interval-for-any-origin">minimum periodic sync interval for any origin</a> + some user agent defined amount for the <var>origin</var> (which may be <code>Infinity</code>). The user agent defined amount MUST be used to mitigate the concerns raised in <a href="#privacy">§ 5 Privacy Considerations</a>, <a href="#security">§ 6 Security Considerations</a> and <a href="#resources">§ 7 Resource Usage</a>.</p>
   <p class="note" role="note"><span>Note:</span> The user agent defined amount can be based on the amount of engagement the user has with the origin. This value can be different each time <a data-link-type="dfn" href="#effective-minimum-sync-interval-for-origin" id="ref-for-effective-minimum-sync-interval-for-origin">effective minimum sync interval for origin</a> is called. No <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event⑥">periodicsync events</a> will fire for a particular origin if the last value returned by <a data-link-type="dfn" href="#effective-minimum-sync-interval-for-origin" id="ref-for-effective-minimum-sync-interval-for-origin①">effective minimum sync interval for origin</a> is <code>Infinity</code>.</p>
   <p>The scheduler <a data-link-type="dfn" href="#process-periodic-sync-registrations" id="ref-for-process-periodic-sync-registrations">processes periodic sync registrations</a>.</p>
   <p class="note" role="note"><span>Note:</span> Browsers may suspend this processing loop when there are no <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations①">active periodic sync registrations</a> to conserve resources.</p>
   <h3 class="heading settled" data-level="4.3" id="constants"><span class="secno">4.3. </span><span class="content">Constants</span><a class="self-link" href="#constants"></a></h3>
    The user agent defines: 
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="minimum-periodic-sync-interval-for-any-origin">minimum periodic sync interval for any origin</dfn>, an unsigned long long, that represents the minimum gap between <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event⑦">periodicsync events</a> for any given <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin⑤">origin</a> in milliseconds, and,</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="minimum-periodic-sync-interval-across-origins">minimum periodic sync interval across origins</dfn>, an unsigned long long, that represents the minimum gap between <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event⑧">periodicsync events</a> across all <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin⑥">origins</a> in milliseconds.</p>
   </ul>
   <p>These constants are used to mitigate the concerns raised in <a href="#privacy">§ 5 Privacy Considerations</a>, <a href="#security">§ 6 Security Considerations</a> and <a href="#resources">§ 7 Resource Usage</a>.</p>
   <p><a data-link-type="dfn" href="#minimum-periodic-sync-interval-across-origins" id="ref-for-minimum-periodic-sync-interval-across-origins">minimum periodic sync interval across origins</a> MUST be greater than or equal to <a data-link-type="dfn" href="#minimum-periodic-sync-interval-for-any-origin" id="ref-for-minimum-periodic-sync-interval-for-any-origin①">minimum periodic sync interval for any origin</a>. <a data-link-type="dfn" href="#minimum-periodic-sync-interval-across-origins" id="ref-for-minimum-periodic-sync-interval-across-origins①">minimum periodic sync interval across origins</a> SHOULD be greater than or equal to 43200000, which is twelve hours in milliseconds.</p>
   <p class="note" role="note"><span>Note:</span> A minimum value of 43200000 (which is twelve hours in milliseconds) for <a data-link-type="dfn" href="#minimum-periodic-sync-interval-across-origins" id="ref-for-minimum-periodic-sync-interval-across-origins②">minimum periodic sync interval across origins</a> is suggested to mitigate the concerns described in <a href="#privacy">§ 5 Privacy Considerations</a> and <a href="#security">§ 6 Security Considerations</a>.</p>
   <p class="note" role="note"><span>Note:</span> Two caps on frequency are needed because conforming to the cap enforced by <a data-link-type="dfn" href="#minimum-periodic-sync-interval-for-any-origin" id="ref-for-minimum-periodic-sync-interval-for-any-origin②">minimum periodic sync interval for any origin</a> for each <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin⑦">origin</a> can still cause the browser to fire <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event⑨">periodicsync events</a> very frequently. This can happen, for instance, when there are many <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration③">periodic sync registrations</a> for different <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin⑧">origins</a>. <a data-link-type="dfn" href="#minimum-periodic-sync-interval-across-origins" id="ref-for-minimum-periodic-sync-interval-across-origins③">minimum periodic sync interval across origins</a> ensures there’s a global cap on how often these events are fired.</p>
   <p>The user agent MAY define a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="maximum-number-of-retries">maximum number of retries</dfn>, a number, allowed for each <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①⓪">periodicsync event</a>. In choosing this, the user agent SHOULD ensure that the time needed to attempt the <a data-link-type="dfn" href="#maximum-number-of-retries" id="ref-for-maximum-number-of-retries">maximum number of retries</a> is an order of magnitude smaller than the <a data-link-type="dfn" href="#minimum-periodic-sync-interval-for-any-origin" id="ref-for-minimum-periodic-sync-interval-for-any-origin③">minimum periodic sync interval for any origin</a>. If undefined, this number is zero.</p>
   <h2 class="heading settled" data-level="5" id="privacy"><span class="secno">5. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy"></a></h2>
   <h3 class="heading settled" data-level="5.1" id="permission"><span class="secno">5.1. </span><span class="content">Permission</span><a class="self-link" href="#permission"></a></h3>
    Periodic Background Sync is only available if the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#enumdef-permissionstate" id="ref-for-enumdef-permissionstate">PermissionState</a></code> for a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dictdef-permissiondescriptor" id="ref-for-dictdef-permissiondescriptor">PermissionDescriptor</a></code> with <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dom-permissiondescriptor-name" id="ref-for-dom-permissiondescriptor-name">name</a></code> <code>"periodic-background-sync"</code> is <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dom-permissionstate-granted" id="ref-for-dom-permissionstate-granted">granted</a></code>. The user agent MAY show UI to the user to ask for this permission. In addition, user agents MUST offer a way for the user to disable Periodic Background Sync.
When Periodic Background Sync is disabled, <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①①">periodicsync events</a> MUST NOT be dispatched for the <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration④">periodic sync registrations</a> affected by this permission. (See <a href="#responding-to-permission-revocation-algorithm">§ 8.2 Respond to permission revocation</a>). 
   <h3 class="heading settled" data-level="5.2" id="location-tracking"><span class="secno">5.2. </span><span class="content">Location Tracking</span><a class="self-link" href="#location-tracking"></a></h3>
    Fetch requests within the <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①②">periodicsync event</a> while <a data-link-type="dfn" href="#periodicsync-event-in-the-background" id="ref-for-periodicsync-event-in-the-background">in the background</a> may reveal the client’s IP address to the server after the user has left the page. The user agent SHOULD limit tracking by capping the number of retries and duration of <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①③">periodicsync event</a>s, to reduce the amount of time the user’s location can be tracked by the website. Further, the user agent SHOULD limit persistent location tracking by capping the frequency of <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①④">periodicsync event</a>s, both for an <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin⑨">origin</a>, and across <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①⓪">origins</a>. 
   <h3 class="heading settled" data-level="5.3" id="history-leaking"><span class="secno">5.3. </span><span class="content">History Leaking</span><a class="self-link" href="#history-leaking"></a></h3>
    Fetch requests within the <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①⑤">periodicsync event</a> while <a data-link-type="dfn" href="#periodicsync-event-in-the-background" id="ref-for-periodicsync-event-in-the-background①">in the background</a> may reveal something about the client’s navigation history to middleboxes on networks different from the one used to create the <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration⑤">periodic sync registration</a>. For instance, the client might visit site https://example.com, which registers a <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①⑥">periodicsync event</a>, but based on the implementation, might not fire until after the user has navigated away from the page and changed networks. Middleboxes on the new network may see the fetch requests that the <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①⑦">periodicsync event</a> makes. The fetch requests are HTTPS so the request contents will not be leaked but the destination of the fetch request and domain may be (via DNS lookups and IP address of the request). To prevent this leakage of browsing history, the user agent MAY choose to only fire <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①⑧">periodicsync events</a> on the network the <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration⑥">periodic sync registration</a> was made on, with the understanding that it will reduce usability by not allowing synchronization opportunistically. 
   <h2 class="heading settled" data-level="6" id="security"><span class="secno">6. </span><span class="content">Security Considerations</span><a class="self-link" href="#security"></a></h2>
    Since Periodic Background Sync is a <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker" id="ref-for-dfn-service-worker①">service worker</a> based API, <a href="https://www.w3.org/TR/service-workers-1/#security-considerations">Service Workers §6 Security Considerations</a> apply. 
   <p>In addition, if the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①①">origin</a> synchronizes more often than the user visits the site, the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①②">origin</a> may be getting more power than the user is aware of or intends. This is because the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①③">origin</a> is able to execute code more frequently than the user intends, from within the <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event①⑨">periodicsync event</a> while <a data-link-type="dfn" href="#periodicsync-event-in-the-background" id="ref-for-periodicsync-event-in-the-background②">in the background</a>.
Some of the attacks this opens up are:</p>
   <ul>
    <li data-md>
     <p>Cryptocurrency mining: If the web app is able to execute code in the background at a high frequency, a malicious <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①④">origin</a> may use this CPU power for cryptocurrency mining.</p>
    <li data-md>
     <p>Distributed Denial of Service: This is possible if a malicious origin uses <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②⓪">periodicsync events</a> on multiple devices to target a specific <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①⑤">origin</a> by repeatedly fetching resources from it.</p>
    <li data-md>
     <p>A malicious <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①⑥">origin</a> can use <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②①">periodicsync events</a> to abuse the digital advertising ecosystem by fake-clicking on online ads, from a multitude of user devices.</p>
   </ul>
   <p>To mitigate the above, the user agent MUST:</p>
   <ul>
    <li data-md>
     <p>Gate the capability on <code>"periodic-background-sync"</code> permission, as described in <a href="#permission">§ 5.1 Permission</a>. This allows the user to stop firing [periodicsync event|periodicsync events=] for any <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①⑦">origin</a> they’ve identified as malicious.</p>
    <li data-md>
     <p>Impose a time limit on the lifetime extension and execution time of a <code class="idl"><a data-link-type="idl" href="#periodicsyncevent" id="ref-for-periodicsyncevent">PeriodicSyncEvent</a></code> which is stricter than the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#extendableevent-timed-out-flag" id="ref-for-extendableevent-timed-out-flag">time limit</a> imposed for <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#extendableevent" id="ref-for-extendableevent">ExtendableEvent</a></code>s in general. In particular, any retries of the <code class="idl"><a data-link-type="idl" href="#periodicsyncevent" id="ref-for-periodicsyncevent①">PeriodicSyncEvent</a></code> MAY have a significantly shortened time limit.
Note: This time-limited execution of the <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②②">periodicsync event</a> makes sure this capability cannot be used for crypto mining on behalf of a malicious <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①⑧">origin</a>.</p>
    <li data-md>
     <p>Block registration from contexts where permission UI cannot be shown to the user. (See <code class="idl"><a data-link-type="idl" href="#dom-periodicsyncmanager-register" id="ref-for-dom-periodicsyncmanager-register">register(tag, options)</a></code>).</p>
   </ul>
   <p>The user agent MUST also impement at least one of the following:</p>
   <ul>
    <li data-md>
     <p>Auto-deny the capability to an <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin①⑨">origin</a> for which the user has not expressed a level of trust.</p>
     <p class="note" role="note"><span>Note:</span> This trust may be expressed by installing the website as a web app.</p>
    <li data-md>
     <p>Cap the interval at which <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②③">periodicsync events</a> are fired, as described in <a href="#constants">§ 4.3 Constants</a>.</p>
    <li data-md>
     <p>Show an audit-style UI to explain to the user how frequently an <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②⓪">origin</a> synchronizes content through this API, with appropriate resource attribution.</p>
   </ul>
   <p>In addition, the user agent SHOULD:</p>
   <ul>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#effective-minimum-sync-interval-for-origin" id="ref-for-effective-minimum-sync-interval-for-origin②">effective minimum sync interval for origin</a> in accordance with the user’s engagement level with the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②①">origin</a>, as defined in <a href="#periodic-sync-scheduler-construct">§ 4.2 Periodic Sync Scheduler</a>. In particular, this means the implementation stops firing <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②④">periodicsync events</a> for <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration⑦">periodic sync registrations</a> whose associated <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②②">origin</a> the user has stopped engaging with.</p>
   </ul>
   <h2 class="heading settled" data-level="7" id="resources"><span class="secno">7. </span><span class="content">Resource Usage</span><a class="self-link" href="#resources"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>A website will most likely download resources from the network when processing a <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②⑤">periodicsync event</a>. The underlying operating system may launch the user agent to dispatch these events, and may keep it awake for a pre-defined duration to allow processing of the events. Both cause battery drain.
The user agent should cap the duration and frequency of these events to limit resource usage by websites when the user has navigated away.</p>
   <p>Large resources should be downloaded by registering a <a data-link-type="dfn" href="https://wicg.github.io/background-fetch/#background-fetch" id="ref-for-background-fetch">background fetch</a> via the <code class="idl"><a data-link-type="idl" href="https://wicg.github.io/background-fetch/#backgroundfetchmanager" id="ref-for-backgroundfetchmanager">BackgroundFetchManager</a></code> interface.</p>
   <p>In addition, the user agent should consider other factors such as user engagement with the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②③">origin</a>, and any user indications to temporarily reduce data consumption, such as a Data Saving Mode, to adjust the frequency of <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②⑥">periodicsync events</a>.</p>
   <h2 class="heading settled" data-level="8" id="algorithms"><span class="secno">8. </span><span class="content">Algorithms</span><a class="self-link" href="#algorithms"></a></h2>
   <div class="algorithm" data-algorithm="Process periodic sync registrations">
    <h3 class="heading settled" data-level="8.1" id="process-periodic-sync-registrations-algorithm"><span class="secno">8.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="process-periodic-sync-registrations">Process periodic sync registrations</dfn></span><a class="self-link" href="#process-periodic-sync-registrations-algorithm"></a></h3>
     When the user agent starts, run the following steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>: 
    <ol>
     <li data-md>
      <p>While true:</p>
      <ol>
       <li data-md>
        <p>Wait for <a data-link-type="dfn" href="#minimum-periodic-sync-interval-across-origins" id="ref-for-minimum-periodic-sync-interval-across-origins④">minimum periodic sync interval across origins</a>.
Note: This can be used to mitigate concerns raised in <a href="#security">§ 6 Security Considerations</a>.</p>
       <li data-md>
        <p>Let <var>firedPeriodicSync</var> be false.</p>
       <li data-md>
        <p>While <var>firedPeriodicSync</var> is false:</p>
        <ol>
         <li data-md>
          <p>Wait for some user agent defined amount of time.</p>
          <p class="note" role="note"><span>Note:</span> This can be used to group synchronization for different <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration⑧">periodic sync registrations</a> into a single device wake-up. This can also be used to mitigate the concerns raised in <a href="#security">§ 6 Security Considerations</a>.</p>
         <li data-md>
          <p>Wait until <a data-link-type="dfn" href="https://wicg.github.io/BackgroundSync/spec/#online" id="ref-for-online">online</a>.</p>
         <li data-md>
          <p>For each <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration" id="ref-for-dfn-service-worker-registration②">service worker registration</a> <var>registration</var> that is not <a data-link-type="dfn">unregistered</a>, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps" id="ref-for-enqueue-the-following-steps">enqueue the following steps</a> to <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-processing-queue" id="ref-for-periodic-sync-processing-queue">periodic sync processing queue</a>:</p>
          <ol>
           <li data-md>
            <p>Let <var>origin</var> be the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②④">origin</a> associated with <var>periodicSyncRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration②">service worker registration</a>.</p>
           <li data-md>
            <p>If <a data-link-type="dfn" href="#periodic-sync-scheduler-time-of-last-fire" id="ref-for-periodic-sync-scheduler-time-of-last-fire">time of last fire</a>[<var>origin</var>] + the <a data-link-type="dfn" href="#effective-minimum-sync-interval-for-origin" id="ref-for-effective-minimum-sync-interval-for-origin③">effective minimum sync interval for origin</a> <var>origin</var> is greater than now, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue">continue</a>.</p>
           <li data-md>
            <p>For each <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration⑨">periodic sync registration</a> <var>periodicSyncRegistration</var> in <var>registration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations②">active periodic sync registrations</a>:</p>
            <ol>
             <li data-md>
              <p>If <var>periodicSyncRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state">state</a> is not "<code>pending</code>", <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue①">continue</a>.</p>
             <li data-md>
              <p>If <var>periodicSyncRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-anchor-time" id="ref-for-periodic-sync-registration-anchor-time">anchor time</a> + <var>periodicSyncRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-minimum-interval" id="ref-for-periodic-sync-registration-minimum-interval①">minimum interval</a> is greater than now, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue②">continue</a>.</p>
             <li data-md>
              <p>Set <var>firedPeriodicSync</var> to true.</p>
             <li data-md>
              <p><a data-link-type="dfn" href="#fire-a-periodicsync-event" id="ref-for-fire-a-periodicsync-event">Fire a periodicsync event</a> for <var>periodicSyncRegistration</var>.</p>
            </ol>
          </ol>
        </ol>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="Respond to permission revocation">
    <h3 class="heading settled" data-level="8.2" id="responding-to-permission-revocation-algorithm"><span class="secno">8.2. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="respond-to-permission-revocation">Respond to permission revocation</dfn></span><a class="self-link" href="#responding-to-permission-revocation-algorithm"></a></h3>
     To <a data-link-type="dfn" href="#respond-to-permission-revocation" id="ref-for-respond-to-permission-revocation">respond to revocation</a> of the permission with <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dom-permissiondescriptor-name" id="ref-for-dom-permissiondescriptor-name①">name</a></code> <code>"periodic-background-sync"</code> for <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②⑤">origin</a> <var>origin</var>, the user agent MUST <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps" id="ref-for-enqueue-the-following-steps①">enqueue the following steps</a> to the <a data-link-type="dfn" href="#periodic-sync-processing-queue" id="ref-for-periodic-sync-processing-queue①">periodic sync processing queue</a>: 
    <ol>
     <li data-md>
      <p>For each <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration①⓪">periodic sync registration</a> <var>registration</var> in <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations③">active periodic sync registrations</a> whose <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration③">service worker registration</a> is associated with the same <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②⑥">origin</a> as <var>origin</var>:</p>
      <ol>
       <li data-md>
        <p>Remove <var>registration</var> from <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations④">active periodic sync registrations</a>.</p>
      </ol>
    </ol>
   </div>
   <h2 class="heading settled" data-level="9" id="api-description"><span class="secno">9. </span><span class="content">API Description</span><a class="self-link" href="#api-description"></a></h2>
   <h3 class="heading settled" data-level="9.1" id="extensions-to-serviceworkerglobalscope"><span class="secno">9.1. </span><span class="content">Extensions to the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope">ServiceWorkerGlobalScope</a></code> interface</span><a class="self-link" href="#extensions-to-serviceworkerglobalscope"></a></h3>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope①"><c- g>ServiceWorkerGlobalScope</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="ServiceWorkerGlobalScope" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-serviceworkerglobalscope-onperiodicsync"><code><c- g>onperiodicsync</c-></code><a class="self-link" href="#dom-serviceworkerglobalscope-onperiodicsync"></a></dfn>;
};
</pre>
   <h3 class="heading settled" data-level="9.2" id="extensions-to-serviceworkerregistration"><span class="secno">9.2. </span><span class="content">Extensions to the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration" id="ref-for-serviceworkerregistration">ServiceWorkerRegistration</a></code> interface</span><a class="self-link" href="#extensions-to-serviceworkerregistration"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration" id="ref-for-serviceworkerregistration①"><c- g>ServiceWorkerRegistration</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager"><c- n>PeriodicSyncManager</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="PeriodicSyncManager" href="#dom-serviceworkerregistration-periodicsync" id="ref-for-dom-serviceworkerregistration-periodicsync"><c- g>periodicSync</c-></a>;
};
</pre>
   <div>
     A <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration" id="ref-for-serviceworkerregistration②">ServiceWorkerRegistration</a></code> has a <dfn class="dfn-paneled" data-dfn-for="ServiceWorkerRegistration" data-dfn-type="dfn" data-noexport id="serviceworkerregistration-periodic-sync-manager">periodic sync manager</dfn> (a <code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager①">PeriodicSyncManager</a></code>). 
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerRegistration" data-dfn-type="attribute" data-export id="dom-serviceworkerregistration-periodicsync"><code>periodicSync</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a>'s <a data-link-type="dfn" href="#serviceworkerregistration-periodic-sync-manager" id="ref-for-serviceworkerregistration-periodic-sync-manager">periodic sync manager</a>, initially a new <code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager②">PeriodicSyncManager</a></code> whose <a data-link-type="dfn" href="#periodicsyncmanager-service-worker-registration" id="ref-for-periodicsyncmanager-service-worker-registration">service worker registration</a> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object①">context object</a>'s <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration" id="ref-for-dfn-service-worker-registration③">service worker registration</a>.</p>
   </div>
   <h3 class="heading settled" data-level="9.3" id="periodicsyncmanager-interface"><span class="secno">9.3. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager③">PeriodicSyncManager</a></code> interface</span><a class="self-link" href="#periodicsyncmanager-interface"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="periodicsyncmanager"><code><c- g>PeriodicSyncManager</c-></code></dfn> {
    <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-periodicsyncmanager-register" id="ref-for-dom-periodicsyncmanager-register①"><c- g>register</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PeriodicSyncManager/register(tag, options), PeriodicSyncManager/register(tag)" data-dfn-type="argument" data-export id="dom-periodicsyncmanager-register-tag-options-tag"><code><c- g>tag</c-></code><a class="self-link" href="#dom-periodicsyncmanager-register-tag-options-tag"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-backgroundsyncoptions" id="ref-for-dictdef-backgroundsyncoptions"><c- n>BackgroundSyncOptions</c-></a> <dfn class="idl-code" data-dfn-for="PeriodicSyncManager/register(tag, options), PeriodicSyncManager/register(tag)" data-dfn-type="argument" data-export id="dom-periodicsyncmanager-register-tag-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-periodicsyncmanager-register-tag-options-options"></a></dfn>);
    <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-periodicsyncmanager-gettags" id="ref-for-dom-periodicsyncmanager-gettags"><c- g>getTags</c-></a>();
    <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-periodicsyncmanager-unregister" id="ref-for-dom-periodicsyncmanager-unregister"><c- g>unregister</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PeriodicSyncManager/unregister(tag)" data-dfn-type="argument" data-export id="dom-periodicsyncmanager-unregister-tag-tag"><code><c- g>tag</c-></code><a class="self-link" href="#dom-periodicsyncmanager-unregister-tag-tag"></a></dfn>);
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-backgroundsyncoptions"><code><c- g>BackgroundSyncOptions</c-></code></dfn> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#EnforceRange" id="ref-for-EnforceRange"><c- g>EnforceRange</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long-long" id="ref-for-idl-unsigned-long-long"><c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="BackgroundSyncOptions" data-dfn-type="dict-member" data-export data-type="unsigned long long " id="dom-backgroundsyncoptions-mininterval"><code><c- g>minInterval</c-></code></dfn> = 0;
};
</pre>
   <div> A <code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager④">PeriodicSyncManager</a></code> has a <dfn class="dfn-paneled" data-dfn-for="PeriodicSyncManager" data-dfn-type="dfn" data-noexport id="periodicsyncmanager-service-worker-registration">service worker registration</dfn> (a <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration" id="ref-for-dfn-service-worker-registration④">service worker registration</a>). </div>
   <div class="algorithm" data-algorithm="register(tag, options)">
     The <code><dfn class="dfn-paneled idl-code" data-dfn-for="PeriodicSyncManager" data-dfn-type="method" data-export data-lt="register(tag, options)|register(tag)" id="dom-periodicsyncmanager-register" title="register(tag, options)"><code>register(<var>tag</var>, <var>options</var>)</code></dfn></code> method, when invoked, MUST return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise">a new promise</a> <var>promise</var> and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps" id="ref-for-enqueue-the-following-steps②">enqueue the following steps</a> to the <a data-link-type="dfn" href="#periodic-sync-processing-queue" id="ref-for-periodic-sync-processing-queue②">periodic sync processing queue</a>: 
    <ol>
     <li data-md>
      <p>Let <var>serviceWorkerRegistration</var> be the <a data-link-type="dfn" href="#periodicsyncmanager-service-worker-registration" id="ref-for-periodicsyncmanager-service-worker-registration①">service worker registration</a> associated with the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object②">context object</a>'s <code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager⑤">PeriodicSyncManager</a></code>.</p>
     <li data-md>
      <p>If <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-active-worker" id="ref-for-dfn-active-worker">active worker</a> is null, <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise">reject</a> <var>promise</var> with an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code> and abort these steps.</p>
     <li data-md>
      <p>The user agent MAY <a data-link-type="dfn" href="https://w3c.github.io/permissions/#request-permission-to-use" id="ref-for-request-permission-to-use">request permission to use</a> <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#enumdef-permissionname" id="ref-for-enumdef-permissionname">PermissionName</a></code> <code>"periodic-background-sync"</code>.</p>
     <li data-md>
      <p>If the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#enumdef-permissionstate" id="ref-for-enumdef-permissionstate①">PermissionState</a></code> for a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dictdef-permissiondescriptor" id="ref-for-dictdef-permissiondescriptor①">PermissionDescriptor</a></code> with <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dom-permissiondescriptor-name" id="ref-for-dom-permissiondescriptor-name②">name</a></code> <code>"periodic-background-sync"</code> is not <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/permissions/#dom-permissionstate-granted" id="ref-for-dom-permissionstate-granted①">granted</a></code>, <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise①">reject</a> <var>promise</var> with a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notallowederror" id="ref-for-notallowederror">NotAllowedError</a></code> and abort these steps.</p>
     <li data-md>
      <p>Let <var>isBackground</var>, a boolean, be true.</p>
     <li data-md>
      <p>For each <var>client</var> in the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client" id="ref-for-dfn-service-worker-client①">service worker clients</a> for the <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②⑦">origin</a>:</p>
      <ol>
       <li data-md>
        <p>If <var>client</var>’s <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client-frame-type" id="ref-for-dfn-service-worker-client-frame-type①">frame type</a> is "<code>top-level</code>" or "<code>auxiliary</code>", set <var>isBackground</var> to false.</p>
      </ol>
     <li data-md>
      <p>If <var>isBackground</var> is true, <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise②">reject</a> <var>promise</var> with an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidaccesserror" id="ref-for-invalidaccesserror">InvalidAccessError</a></code> and abort these steps.</p>
     <li data-md>
      <p>Let <var>currentRegistration</var> be the <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration①①">periodic sync registration</a> in <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations⑤">active periodic sync registrations</a> whose <a data-link-type="dfn" href="#periodic-sync-registration-tag" id="ref-for-periodic-sync-registration-tag">tag</a> equals <var>tag</var> if it exists, else null.</p>
     <li data-md>
      <p>If <var>currentRegistration</var> is null:</p>
      <ol>
       <li data-md>
        <p>Let <var>newRegistration</var> be a new <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration①②">periodic sync registration</a>.</p>
       <li data-md>
        <p>Set <var>newRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-tag" id="ref-for-periodic-sync-registration-tag①">tag</a> to <var>tag</var>.</p>
       <li data-md>
        <p>Set <var>newRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-minimum-interval" id="ref-for-periodic-sync-registration-minimum-interval②">minimum interval</a> to <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-backgroundsyncoptions-mininterval" id="ref-for-dom-backgroundsyncoptions-mininterval">minInterval</a></code> member.</p>
       <li data-md>
        <p>Set <var>newRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state①">state</a> to "<code>pending</code>".</p>
       <li data-md>
        <p>Set <var>newRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration④">service worker registration</a> to <var>serviceWorkerRegistration</var>.</p>
       <li data-md>
        <p>Set <var>newRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-anchor-time" id="ref-for-periodic-sync-registration-anchor-time①">anchor time</a> to a timestamp representing now.</p>
       <li data-md>
        <p>Add <var>newRegistration</var> to <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations⑥">active periodic sync registrations</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn">Resolve</a> <var>promise</var>.</p>
      </ol>
     <li data-md>
      <p>Else:</p>
      <ol>
       <li data-md>
        <p>If <var>currentRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-minimum-interval" id="ref-for-periodic-sync-registration-minimum-interval③">minimum interval</a> is different to <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-backgroundsyncoptions-mininterval" id="ref-for-dom-backgroundsyncoptions-mininterval①">minInterval</a></code> member:</p>
        <ol>
         <li data-md>
          <p>Set <var>currentRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-minimum-interval" id="ref-for-periodic-sync-registration-minimum-interval④">minimum interval</a> to <var>options</var>’ <code class="idl"><a data-link-type="idl" href="#dom-backgroundsyncoptions-mininterval" id="ref-for-dom-backgroundsyncoptions-mininterval②">minInterval</a></code> member.</p>
        </ol>
       <li data-md>
        <p>Else, if <var>currentRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state②">state</a> is "<code>firing</code>", set <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state③">state</a> to "<code>reregistered-while-firing</code>".</p>
       <li data-md>
        <p><a data-link-type="dfn">Resolve</a> <var>promise</var>.</p>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="getTags()">
     The <code><dfn class="dfn-paneled idl-code" data-dfn-for="PeriodicSyncManager" data-dfn-type="method" data-export id="dom-periodicsyncmanager-gettags" title="getTags()"><code>getTags()</code></dfn></code> method when invoked, MUST return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise①">a new promise</a> <var>promise</var> and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps" id="ref-for-enqueue-the-following-steps③">enqueue the following steps</a> to the <a data-link-type="dfn" href="#periodic-sync-processing-queue" id="ref-for-periodic-sync-processing-queue③">periodic sync processing queue</a>: 
    <ol>
     <li data-md>
      <p>Let <var>serviceWorkerRegistration</var> be the <a data-link-type="dfn" href="#periodicsyncmanager-service-worker-registration" id="ref-for-periodicsyncmanager-service-worker-registration②">service worker registration</a> associated with the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object③">context object</a>'s <code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager⑥">PeriodicSyncManager</a></code>.</p>
     <li data-md>
      <p>Let <var>currentTags</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a>.</p>
     <li data-md>
      <p>For each <var>registration</var> of <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations⑦">active periodic sync registrations</a>, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">append</a> <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-tag" id="ref-for-periodic-sync-registration-tag②">tag</a> to <var>currentTags</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn">Resolve</a> <var>promise</var> with <var>currentTags</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="unregister(tag)">
     The <code><dfn class="dfn-paneled idl-code" data-dfn-for="PeriodicSyncManager" data-dfn-type="method" data-export id="dom-periodicsyncmanager-unregister" title="unregister(tag)"><code>unregister(<var>tag</var>)</code></dfn></code> method when invoked, MUST return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise②">a new promise</a> <var>promise</var> and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps" id="ref-for-enqueue-the-following-steps④">enqueue the following steps</a> to the <a data-link-type="dfn" href="#periodic-sync-processing-queue" id="ref-for-periodic-sync-processing-queue④">periodic sync processing queue</a>: 
    <ol>
     <li data-md>
      <p>Let <var>serviceWorkerRegistration</var> be the <a data-link-type="dfn" href="#periodicsyncmanager-service-worker-registration" id="ref-for-periodicsyncmanager-service-worker-registration③">service worker registration</a> associated with the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object④">context object</a>'s <code class="idl"><a data-link-type="idl" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager⑦">PeriodicSyncManager</a></code>.</p>
      <ol>
       <li data-md>
        <p>Let <var>currentRegistration</var> be the <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration①③">periodic sync registration</a> in <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations⑧">active periodic sync registrations</a> whose <a data-link-type="dfn" href="#periodic-sync-registration-tag" id="ref-for-periodic-sync-registration-tag③">tag</a> equals <var>tag</var> if it exists, else null.</p>
       <li data-md>
        <p>If <var>currentRegistration</var> is not null, remove <var>currentRegistration</var> from <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations⑨">active periodic sync registrations</a>.</p>
       <li data-md>
        <p>Resolve <var>promise</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled" data-level="9.4" id="periodicsync-event-interface"><span class="secno">9.4. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="periodicsync-event">periodicsync event</dfn></span><a class="self-link" href="#periodicsync-event-interface"></a></h3>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-periodicsynceventinit"><code><c- g>PeriodicSyncEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit" id="ref-for-dictdef-extendableeventinit"><c- n>ExtendableEventInit</c-></a> {
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PeriodicSyncEventInit" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-periodicsynceventinit-tag"><code><c- g>tag</c-></code><a class="self-link" href="#dom-periodicsynceventinit-tag"></a></dfn>;
};

[
    <dfn class="idl-code" data-dfn-for="PeriodicSyncEvent" data-dfn-type="constructor" data-export data-lt="PeriodicSyncEvent(type, init)" id="dom-periodicsyncevent-periodicsyncevent"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-periodicsyncevent-periodicsyncevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PeriodicSyncEvent/PeriodicSyncEvent(type, init)" data-dfn-type="argument" data-export id="dom-periodicsyncevent-periodicsyncevent-type-init-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-periodicsyncevent-periodicsyncevent-type-init-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-periodicsynceventinit" id="ref-for-dictdef-periodicsynceventinit"><c- n>PeriodicSyncEventInit</c-></a> <dfn class="idl-code" data-dfn-for="PeriodicSyncEvent/PeriodicSyncEvent(type, init)" data-dfn-type="argument" data-export id="dom-periodicsyncevent-periodicsyncevent-type-init-init"><code><c- g>init</c-></code><a class="self-link" href="#dom-periodicsyncevent-periodicsyncevent-type-init-init"></a></dfn>),
    <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>ServiceWorker</c->
] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="periodicsyncevent"><code><c- g>PeriodicSyncEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#extendableevent" id="ref-for-extendableevent①"><c- n>ExtendableEvent</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-periodicsyncevent-tag" id="ref-for-dom-periodicsyncevent-tag"><c- g>tag</c-></a>;
  };
</pre>
   <div> A <code class="idl"><a data-link-type="idl" href="#periodicsyncevent" id="ref-for-periodicsyncevent②">PeriodicSyncEvent</a></code> has a <dfn class="dfn-paneled" data-dfn-for="PeriodicSyncEvent" data-dfn-type="dfn" data-noexport id="periodicsyncevent-tag">tag</dfn> (a <a data-link-type="dfn" href="#periodic-sync-registration-tag" id="ref-for-periodic-sync-registration-tag④">tag</a>).
  The <dfn class="dfn-paneled idl-code" data-dfn-for="PeriodicSyncEvent" data-dfn-type="attribute" data-export id="dom-periodicsyncevent-tag"><code>tag</code></dfn> attribute must return the value it was initialized to. </div>
   <h4 class="heading settled" data-level="9.4.1" id="firing-a-periodicsync-event"><span class="secno">9.4.1. </span><span class="content"><a data-link-type="dfn" href="#fire-a-periodicsync-event" id="ref-for-fire-a-periodicsync-event①">Fire a periodicsync event</a></span><a class="self-link" href="#firing-a-periodicsync-event"></a></h4>
   <div class="algorithm" data-algorithm="fire a periodicsync event">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fire-a-periodicsync-event">fire a periodicsync event</dfn> for a <a data-link-type="dfn" href="#periodic-sync-registration" id="ref-for-periodic-sync-registration①④">periodic sync registration</a> <var>registration</var>, the user agent MUST run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>serviceWorkerRegistration</var> be <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration⑤">service worker registration</a>.</p>
     <li data-md>
      <p>If <var>registration</var> is no longer part of <var>serviceWorkerRegistration</var>’s <a data-link-type="dfn" href="#active-periodic-sync-registrations" id="ref-for-active-periodic-sync-registrations①⓪">active periodic sync registrations</a>, abort these steps.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert">Assert</a>: <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state④">state</a> is "<code>pending</code>".</p>
     <li data-md>
      <p>Let retryCount be 0.</p>
     <li data-md>
      <p>Set <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state⑤">state</a> to "<code>firing</code>".</p>
     <li data-md>
      <p>While true:</p>
      <ol>
       <li data-md>
        <p>Let <var>continue</var> be false.</p>
       <li data-md>
        <p>Let <var>success</var> be false.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#fire-functional-event" id="ref-for-fire-functional-event">Fire functional event</a> "<code>periodicsync</code>" using <code class="idl"><a data-link-type="idl" href="#periodicsyncevent" id="ref-for-periodicsyncevent③">PeriodicSyncEvent</a></code> on <var>serviceWorkerRegistration</var> with <a data-link-type="dfn" href="#periodicsyncevent-tag" id="ref-for-periodicsyncevent-tag">tag</a> set to <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-tag" id="ref-for-periodic-sync-registration-tag⑤">tag</a>. Let <var>dispatchedEvent</var>, an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#extendableevent" id="ref-for-extendableevent②">ExtendableEvent</a></code>, represent the dispatched <a data-link-type="dfn" href="#periodicsync-event" id="ref-for-periodicsync-event②⑦">periodicsync event</a> and run the following steps with <var>dispatchedEvent</var>:</p>
       <li data-md>
        <p>Let <var>waitUntilPromise</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#waiting-for-all" id="ref-for-waiting-for-all">waiting for all</a> of <var>dispatchedEvent</var>’s <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises" id="ref-for-extendableevent-extend-lifetime-promises">extend lifetime promises</a>.</p>
       <li data-md>
        <p>React to the <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#upon-fulfillment" id="ref-for-upon-fulfillment">fulfillment</a> of <var>waitUntilPromise</var> with the following steps:</p>
        <ol>
         <li data-md>
          <p>Set <var>success</var> to true.</p>
         <li data-md>
          <p>Set <var>continue</var> to true.</p>
        </ol>
       <li data-md>
        <p>React to rejection <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#upon-rejection" id="ref-for-upon-rejection">rejection</a> of <var>waitUntilPromise</var> with the following steps:</p>
        <ol>
         <li data-md>
          <p>Set <var>continue</var> to true.</p>
        </ol>
       <li data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">In parallel</a>:</p>
        <ol>
         <li data-md>
          <p>Wait for <var>continue</var> to be true.</p>
         <li data-md>
          <p>Let <var>origin</var> be the <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin" id="ref-for-service-worker-client-origin②⑧">origin</a> associated with <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-service-worker-registration" id="ref-for-periodic-sync-registration-service-worker-registration⑥">service worker registration</a>.</p>
         <li data-md>
          <p>If <var>success</var> is true, set <a data-link-type="dfn" href="#periodic-sync-scheduler-time-of-last-fire" id="ref-for-periodic-sync-scheduler-time-of-last-fire①">time of last fire</a> for key <var>origin</var> to the current time.</p>
         <li data-md>
          <p>If <var>success</var> is true or <var>retryCount</var> is greater than <a data-link-type="dfn" href="#maximum-number-of-retries" id="ref-for-maximum-number-of-retries①">maximum number of retries</a> or <var>registration</var>’s state is "<code>reregistered-while-firing</code>", then:</p>
          <ol>
           <li data-md>
            <p>Set <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-state" id="ref-for-periodic-sync-registration-state⑥">state</a> to "<code>pending</code>".</p>
           <li data-md>
            <p>Set <var>registration</var>’s <a data-link-type="dfn" href="#periodic-sync-registration-anchor-time" id="ref-for-periodic-sync-registration-anchor-time②">anchor time</a> to a timestamp representing now.</p>
           <li data-md>
            <p>Abort these steps.</p>
          </ol>
        </ol>
       <li data-md>
        <p>Increment <var>retryCount</var>.</p>
       <li data-md>
        <p>Wait for a small back-off time based on <var>retryCount</var>.</p>
      </ol>
    </ol>
   </div>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#active-periodic-sync-registrations">Active periodic sync registrations</a><span>, in §3</span>
   <li><a href="#periodic-sync-registration-anchor-time">anchor time</a><span>, in §4.1</span>
   <li><a href="#dictdef-backgroundsyncoptions">BackgroundSyncOptions</a><span>, in §9.3</span>
   <li><a href="#effective-minimum-sync-interval-for-origin">effective minimum sync interval for origin</a><span>, in §4.2</span>
   <li><a href="#fire-a-periodicsync-event">fire a periodicsync event</a><span>, in §9.4.1</span>
   <li><a href="#dom-periodicsyncmanager-gettags">getTags()</a><span>, in §9.3</span>
   <li><a href="#periodicsync-event-in-the-background">in the background</a><span>, in §2</span>
   <li><a href="#maximum-number-of-retries">maximum number of retries</a><span>, in §4.3</span>
   <li><a href="#periodic-sync-registration-minimum-interval">minimum interval</a><span>, in §4.1</span>
   <li><a href="#minimum-periodic-sync-interval-across-origins">minimum periodic sync interval across origins</a><span>, in §4.3</span>
   <li><a href="#minimum-periodic-sync-interval-for-any-origin">minimum periodic sync interval for any origin</a><span>, in §4.3</span>
   <li><a href="#dom-backgroundsyncoptions-mininterval">minInterval</a><span>, in §9.3</span>
   <li><a href="#dom-serviceworkerglobalscope-onperiodicsync">onperiodicsync</a><span>, in §9.1</span>
   <li><a href="#dom-serviceworkerregistration-periodicsync">periodicSync</a><span>, in §9.2</span>
   <li><a href="#periodicsync-event">periodicsync event</a><span>, in §9.4</span>
   <li><a href="#periodicsyncevent">PeriodicSyncEvent</a><span>, in §9.4</span>
   <li><a href="#dictdef-periodicsynceventinit">PeriodicSyncEventInit</a><span>, in §9.4</span>
   <li><a href="#dom-periodicsyncevent-periodicsyncevent">PeriodicSyncEvent(type, init)</a><span>, in §9.4</span>
   <li><a href="#periodicsyncmanager">PeriodicSyncManager</a><span>, in §9.3</span>
   <li><a href="#serviceworkerregistration-periodic-sync-manager">periodic sync manager</a><span>, in §9.2</span>
   <li><a href="#periodic-sync-processing-queue">Periodic sync processing queue</a><span>, in §3</span>
   <li><a href="#periodic-sync-registration">periodic sync registration</a><span>, in §4.1</span>
   <li><a href="#periodic-sync-scheduler">Periodic Sync Scheduler</a><span>, in §4.2</span>
   <li><a href="#process-periodic-sync-registrations">Process periodic sync registrations</a><span>, in §8.1</span>
   <li><a href="#dom-periodicsyncmanager-register">register(tag)</a><span>, in §9.3</span>
   <li><a href="#dom-periodicsyncmanager-register">register(tag, options)</a><span>, in §9.3</span>
   <li><a href="#respond-to-permission-revocation">Respond to permission revocation</a><span>, in §8.2</span>
   <li>
    service worker registration
    <ul>
     <li><a href="#periodicsyncmanager-service-worker-registration">dfn for PeriodicSyncManager</a><span>, in §9.3</span>
     <li><a href="#periodic-sync-registration-service-worker-registration">dfn for periodic sync registration</a><span>, in §4.1</span>
    </ul>
   <li><a href="#periodic-sync-registration-state">state</a><span>, in §4.1</span>
   <li>
    tag
    <ul>
     <li><a href="#dom-periodicsyncevent-tag">attribute for PeriodicSyncEvent</a><span>, in §9.4</span>
     <li><a href="#periodicsyncevent-tag">dfn for PeriodicSyncEvent</a><span>, in §9.4</span>
     <li><a href="#periodic-sync-registration-tag">dfn for periodic sync registration</a><span>, in §4.1</span>
     <li><a href="#dom-periodicsynceventinit-tag">dict-member for PeriodicSyncEventInit</a><span>, in §9.4</span>
    </ul>
   <li><a href="#periodic-sync-scheduler-time-of-last-fire">time of last fire</a><span>, in §4.2</span>
   <li><a href="#dom-periodicsyncmanager-unregister">unregister(tag)</a><span>, in §9.3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-backgroundfetchmanager">
   <a href="https://wicg.github.io/background-fetch/#backgroundfetchmanager">https://wicg.github.io/background-fetch/#backgroundfetchmanager</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-backgroundfetchmanager">7. Resource Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-background-fetch">
   <a href="https://wicg.github.io/background-fetch/#background-fetch">https://wicg.github.io/background-fetch/#background-fetch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-background-fetch">7. Resource Usage</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">9.2. Extensions to the ServiceWorkerRegistration interface</a> <a href="#ref-for-context-object①">(2)</a>
    <li><a href="#ref-for-context-object②">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-context-object③">(2)</a> <a href="#ref-for-context-object④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">9.1. Extensions to the ServiceWorkerGlobalScope interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context">1.1. Example</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-enqueue-the-following-steps">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps">https://html.spec.whatwg.org/multipage/infrastructure.html#enqueue-the-following-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enqueue-the-following-steps">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-enqueue-the-following-steps①">8.2. Respond to permission revocation</a>
    <li><a href="#ref-for-enqueue-the-following-steps②">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-enqueue-the-following-steps③">(2)</a> <a href="#ref-for-enqueue-the-following-steps④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-in-parallel①">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-starting-a-new-parallel-queue">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#starting-a-new-parallel-queue">https://html.spec.whatwg.org/multipage/infrastructure.html#starting-a-new-parallel-queue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-starting-a-new-parallel-queue">3. Extensions to service worker registration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-append">
   <a href="https://infra.spec.whatwg.org/#list-append">https://infra.spec.whatwg.org/#list-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-append">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-assert">
   <a href="https://infra.spec.whatwg.org/#assert">https://infra.spec.whatwg.org/#assert</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-assert">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iteration-continue">
   <a href="https://infra.spec.whatwg.org/#iteration-continue">https://infra.spec.whatwg.org/#iteration-continue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iteration-continue">8.1. Process periodic sync registrations</a> <a href="#ref-for-iteration-continue①">(2)</a> <a href="#ref-for-iteration-continue②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-map">
   <a href="https://infra.spec.whatwg.org/#ordered-map">https://infra.spec.whatwg.org/#ordered-map</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-map">3. Extensions to service worker registration</a>
    <li><a href="#ref-for-ordered-map①">4.2. Periodic Sync Scheduler</a> <a href="#ref-for-ordered-map②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-permissionstate-granted">
   <a href="https://w3c.github.io/permissions/#dom-permissionstate-granted">https://w3c.github.io/permissions/#dom-permissionstate-granted</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-permissionstate-granted">5.1. Permission</a>
    <li><a href="#ref-for-dom-permissionstate-granted①">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-permissiondescriptor">
   <a href="https://w3c.github.io/permissions/#dictdef-permissiondescriptor">https://w3c.github.io/permissions/#dictdef-permissiondescriptor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-permissiondescriptor">5.1. Permission</a>
    <li><a href="#ref-for-dictdef-permissiondescriptor①">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-enumdef-permissionname">
   <a href="https://w3c.github.io/permissions/#enumdef-permissionname">https://w3c.github.io/permissions/#enumdef-permissionname</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-permissionname">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-enumdef-permissionstate">
   <a href="https://w3c.github.io/permissions/#enumdef-permissionstate">https://w3c.github.io/permissions/#enumdef-permissionstate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-permissionstate">5.1. Permission</a>
    <li><a href="#ref-for-enumdef-permissionstate①">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-permissiondescriptor-name">
   <a href="https://w3c.github.io/permissions/#dom-permissiondescriptor-name">https://w3c.github.io/permissions/#dom-permissiondescriptor-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-permissiondescriptor-name">5.1. Permission</a>
    <li><a href="#ref-for-dom-permissiondescriptor-name①">8.2. Respond to permission revocation</a>
    <li><a href="#ref-for-dom-permissiondescriptor-name②">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-request-permission-to-use">
   <a href="https://w3c.github.io/permissions/#request-permission-to-use">https://w3c.github.io/permissions/#request-permission-to-use</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-request-permission-to-use">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-new-promise">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise">https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-new-promise">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-a-new-promise①">(2)</a> <a href="#ref-for-a-new-promise②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reject-promise">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise">https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reject-promise">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-reject-promise①">(2)</a> <a href="#ref-for-reject-promise②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-upon-fulfillment">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#upon-fulfillment">https://www.w3.org/2001/tag/doc/promises-guide/#upon-fulfillment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-upon-fulfillment">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-upon-rejection">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#upon-rejection">https://www.w3.org/2001/tag/doc/promises-guide/#upon-rejection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-upon-rejection">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-waiting-for-all">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#waiting-for-all">https://www.w3.org/2001/tag/doc/promises-guide/#waiting-for-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-waiting-for-all">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-secure-contexts">
   <a href="https://w3c.github.io/webappsec-secure-contexts/#secure-contexts">https://w3c.github.io/webappsec-secure-contexts/#secure-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-secure-contexts">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cache">
   <a href="https://w3c.github.io/ServiceWorker/#cache">https://w3c.github.io/ServiceWorker/#cache</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cache">1.1. Example</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-extendableevent">
   <a href="https://w3c.github.io/ServiceWorker/#extendableevent">https://w3c.github.io/ServiceWorker/#extendableevent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-extendableevent">6. Security Considerations</a>
    <li><a href="#ref-for-extendableevent①">9.4. The periodicsync event</a>
    <li><a href="#ref-for-extendableevent②">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-extendableeventinit">
   <a href="https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit">https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-extendableeventinit">9.4. The periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serviceworkerglobalscope">
   <a href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope">https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serviceworkerglobalscope">9.1. Extensions to the ServiceWorkerGlobalScope interface</a> <a href="#ref-for-serviceworkerglobalscope①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serviceworkerregistration">
   <a href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration">https://w3c.github.io/ServiceWorker/#serviceworkerregistration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serviceworkerregistration">9.2. Extensions to the ServiceWorkerRegistration interface</a> <a href="#ref-for-serviceworkerregistration①">(2)</a> <a href="#ref-for-serviceworkerregistration②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-active-worker">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-active-worker">https://w3c.github.io/ServiceWorker/#dfn-active-worker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-active-worker">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-extendableevent-extend-lifetime-promises">
   <a href="https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises">https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-extendableevent-extend-lifetime-promises">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fire-functional-event">
   <a href="https://w3c.github.io/ServiceWorker/#fire-functional-event">https://w3c.github.io/ServiceWorker/#fire-functional-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fire-functional-event">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-service-worker-client-frame-type">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client-frame-type">https://w3c.github.io/ServiceWorker/#dfn-service-worker-client-frame-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-service-worker-client-frame-type">2. Concepts</a>
    <li><a href="#ref-for-dfn-service-worker-client-frame-type①">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-service-worker-client-origin">
   <a href="https://w3c.github.io/ServiceWorker/#service-worker-client-origin">https://w3c.github.io/ServiceWorker/#service-worker-client-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-service-worker-client-origin">2. Concepts</a>
    <li><a href="#ref-for-service-worker-client-origin①">4.1. Periodic sync registration</a>
    <li><a href="#ref-for-service-worker-client-origin②">4.2. Periodic Sync Scheduler</a> <a href="#ref-for-service-worker-client-origin③">(2)</a> <a href="#ref-for-service-worker-client-origin④">(3)</a>
    <li><a href="#ref-for-service-worker-client-origin⑤">4.3. Constants</a> <a href="#ref-for-service-worker-client-origin⑥">(2)</a> <a href="#ref-for-service-worker-client-origin⑦">(3)</a> <a href="#ref-for-service-worker-client-origin⑧">(4)</a>
    <li><a href="#ref-for-service-worker-client-origin⑨">5.2. Location Tracking</a> <a href="#ref-for-service-worker-client-origin①⓪">(2)</a>
    <li><a href="#ref-for-service-worker-client-origin①①">6. Security Considerations</a> <a href="#ref-for-service-worker-client-origin①②">(2)</a> <a href="#ref-for-service-worker-client-origin①③">(3)</a> <a href="#ref-for-service-worker-client-origin①④">(4)</a> <a href="#ref-for-service-worker-client-origin①⑤">(5)</a> <a href="#ref-for-service-worker-client-origin①⑥">(6)</a> <a href="#ref-for-service-worker-client-origin①⑦">(7)</a> <a href="#ref-for-service-worker-client-origin①⑧">(8)</a> <a href="#ref-for-service-worker-client-origin①⑨">(9)</a> <a href="#ref-for-service-worker-client-origin②⓪">(10)</a> <a href="#ref-for-service-worker-client-origin②①">(11)</a> <a href="#ref-for-service-worker-client-origin②②">(12)</a>
    <li><a href="#ref-for-service-worker-client-origin②③">7. Resource Usage</a>
    <li><a href="#ref-for-service-worker-client-origin②④">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-service-worker-client-origin②⑤">8.2. Respond to permission revocation</a> <a href="#ref-for-service-worker-client-origin②⑥">(2)</a>
    <li><a href="#ref-for-service-worker-client-origin②⑦">9.3. PeriodicSyncManager interface</a>
    <li><a href="#ref-for-service-worker-client-origin②⑧">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-service-worker">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-service-worker">https://w3c.github.io/ServiceWorker/#dfn-service-worker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-service-worker">1.1. Example</a>
    <li><a href="#ref-for-dfn-service-worker①">6. Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-service-worker-client">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client">https://w3c.github.io/ServiceWorker/#dfn-service-worker-client</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-service-worker-client">2. Concepts</a>
    <li><a href="#ref-for-dfn-service-worker-client①">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-service-worker-registration">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration">https://w3c.github.io/ServiceWorker/#dfn-service-worker-registration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-service-worker-registration">3. Extensions to service worker registration</a>
    <li><a href="#ref-for-dfn-service-worker-registration①">4.1. Periodic sync registration</a>
    <li><a href="#ref-for-dfn-service-worker-registration②">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-dfn-service-worker-registration③">9.2. Extensions to the ServiceWorkerRegistration interface</a>
    <li><a href="#ref-for-dfn-service-worker-registration④">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-extendableevent-timed-out-flag">
   <a href="https://w3c.github.io/ServiceWorker/#extendableevent-timed-out-flag">https://w3c.github.io/ServiceWorker/#extendableevent-timed-out-flag</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-extendableevent-timed-out-flag">6. Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-online">
   <a href="https://wicg.github.io/BackgroundSync/spec/#online">https://wicg.github.io/BackgroundSync/spec/#online</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-online">8.1. Process periodic sync registrations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3. Extensions to service worker registration</a>
    <li><a href="#ref-for-idl-DOMString①">4.1. Periodic sync registration</a>
    <li><a href="#ref-for-idl-DOMString②">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-idl-DOMString③">(2)</a> <a href="#ref-for-idl-DOMString④">(3)</a>
    <li><a href="#ref-for-idl-DOMString⑤">9.4. The periodicsync event</a> <a href="#ref-for-idl-DOMString⑥">(2)</a> <a href="#ref-for-idl-DOMString⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-EnforceRange">
   <a href="https://heycam.github.io/webidl/#EnforceRange">https://heycam.github.io/webidl/#EnforceRange</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-EnforceRange">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">9.2. Extensions to the ServiceWorkerRegistration interface</a>
    <li><a href="#ref-for-Exposed①">9.3. PeriodicSyncManager interface</a>
    <li><a href="#ref-for-Exposed②">9.4. The periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidaccesserror">
   <a href="https://heycam.github.io/webidl/#invalidaccesserror">https://heycam.github.io/webidl/#invalidaccesserror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidaccesserror">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notallowederror">
   <a href="https://heycam.github.io/webidl/#notallowederror">https://heycam.github.io/webidl/#notallowederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notallowederror">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long-long">https://heycam.github.io/webidl/#idl-unsigned-long-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long-long">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[BACKGROUND-FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-backgroundfetchmanager" style="color:initial">BackgroundFetchManager</span>
     <li><span class="dfn-paneled" id="term-for-background-fetch" style="color:initial">background fetch</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context" style="color:initial">browsing context</span>
     <li><span class="dfn-paneled" id="term-for-enqueue-the-following-steps" style="color:initial">enqueue the following steps</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-starting-a-new-parallel-queue" style="color:initial">starting a new parallel queue</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-assert" style="color:initial">assert</span>
     <li><span class="dfn-paneled" id="term-for-iteration-continue" style="color:initial">continue</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-ordered-map" style="color:initial">map</span>
    </ul>
   <li>
    <a data-link-type="biblio">[permissions]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-permissionstate-granted" style="color:initial">"granted"</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-permissiondescriptor" style="color:initial">PermissionDescriptor</span>
     <li><span class="dfn-paneled" id="term-for-enumdef-permissionname" style="color:initial">PermissionName</span>
     <li><span class="dfn-paneled" id="term-for-enumdef-permissionstate" style="color:initial">PermissionState</span>
     <li><span class="dfn-paneled" id="term-for-dom-permissiondescriptor-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-request-permission-to-use" style="color:initial">request permission to use</span>
    </ul>
   <li>
    <a data-link-type="biblio">[promises-guide]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-a-new-promise" style="color:initial">a new promise</span>
     <li><span class="dfn-paneled" id="term-for-reject-promise" style="color:initial">reject</span>
     <li><span class="dfn-paneled" id="term-for-upon-fulfillment" style="color:initial">upon fulfillment</span>
     <li><span class="dfn-paneled" id="term-for-upon-rejection" style="color:initial">upon rejection</span>
     <li><span class="dfn-paneled" id="term-for-waiting-for-all" style="color:initial">waiting for all</span>
    </ul>
   <li>
    <a data-link-type="biblio">[secure-contexts]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-secure-contexts" style="color:initial">secure contexts</span>
    </ul>
   <li>
    <a data-link-type="biblio">[service-workers-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cache" style="color:initial">Cache</span>
     <li><span class="dfn-paneled" id="term-for-extendableevent" style="color:initial">ExtendableEvent</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-extendableeventinit" style="color:initial">ExtendableEventInit</span>
     <li><span class="dfn-paneled" id="term-for-serviceworkerglobalscope" style="color:initial">ServiceWorkerGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-serviceworkerregistration" style="color:initial">ServiceWorkerRegistration</span>
     <li><span class="dfn-paneled" id="term-for-dfn-active-worker" style="color:initial">active worker</span>
     <li><span class="dfn-paneled" id="term-for-extendableevent-extend-lifetime-promises" style="color:initial">extend lifetime promises</span>
     <li><span class="dfn-paneled" id="term-for-fire-functional-event" style="color:initial">fire functional event</span>
     <li><span class="dfn-paneled" id="term-for-dfn-service-worker-client-frame-type" style="color:initial">frame type</span>
     <li><span class="dfn-paneled" id="term-for-service-worker-client-origin" style="color:initial">origin</span>
     <li><span class="dfn-paneled" id="term-for-dfn-service-worker" style="color:initial">service worker</span>
     <li><span class="dfn-paneled" id="term-for-dfn-service-worker-client" style="color:initial">service worker client</span>
     <li><span class="dfn-paneled" id="term-for-dfn-service-worker-registration" style="color:initial">service worker registration</span>
     <li><span class="dfn-paneled" id="term-for-extendableevent-timed-out-flag" style="color:initial">timed out flag</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEB-BACKGROUND-SYNC]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-online" style="color:initial">online</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-EnforceRange" style="color:initial">EnforceRange</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidaccesserror" style="color:initial">InvalidAccessError</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-notallowederror" style="color:initial">NotAllowedError</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long-long" style="color:initial">unsigned long long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-background-fetch">[BACKGROUND-FETCH]
   <dd><a href="https://wicg.github.io/background-fetch/">Background Fetch</a>. Living Standard. URL: <a href="https://wicg.github.io/background-fetch/">https://wicg.github.io/background-fetch/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-permissions">[PERMISSIONS]
   <dd>Mounir Lamouri; Marcos Caceres; Jeffrey Yasskin. <a href="https://www.w3.org/TR/permissions/">Permissions</a>. 25 September 2017. WD. URL: <a href="https://www.w3.org/TR/permissions/">https://www.w3.org/TR/permissions/</a>
   <dt id="biblio-promises-guide">[PROMISES-GUIDE]
   <dd>Domenic Denicola. <a href="https://www.w3.org/2001/tag/doc/promises-guide">Writing Promise-Using Specifications</a>. 9 November 2018. TAG Finding. URL: <a href="https://www.w3.org/2001/tag/doc/promises-guide">https://www.w3.org/2001/tag/doc/promises-guide</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-secure-contexts">[SECURE-CONTEXTS]
   <dd>Mike West. <a href="https://www.w3.org/TR/secure-contexts/">Secure Contexts</a>. 15 September 2016. CR. URL: <a href="https://www.w3.org/TR/secure-contexts/">https://www.w3.org/TR/secure-contexts/</a>
   <dt id="biblio-service-workers-1">[SERVICE-WORKERS-1]
   <dd>Alex Russell; et al. <a href="https://www.w3.org/TR/service-workers-1/">Service Workers 1</a>. 2 November 2017. WD. URL: <a href="https://www.w3.org/TR/service-workers-1/">https://www.w3.org/TR/service-workers-1/</a>
   <dt id="biblio-web-background-sync">[WEB-BACKGROUND-SYNC]
   <dd><a href="https://wicg.github.io/BackgroundSync/spec/">Web Background Synchronization</a>. Living Standard. URL: <a href="https://wicg.github.io/BackgroundSync/spec/">https://wicg.github.io/BackgroundSync/spec/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope①①"><c- g>ServiceWorkerGlobalScope</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-serviceworkerglobalscope-onperiodicsync"><code><c- g>onperiodicsync</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration" id="ref-for-serviceworkerregistration①①"><c- g>ServiceWorkerRegistration</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#periodicsyncmanager" id="ref-for-periodicsyncmanager⑧"><c- n>PeriodicSyncManager</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="PeriodicSyncManager" href="#dom-serviceworkerregistration-periodicsync" id="ref-for-dom-serviceworkerregistration-periodicsync①"><c- g>periodicSync</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <a href="#periodicsyncmanager"><code><c- g>PeriodicSyncManager</c-></code></a> {
    <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-periodicsyncmanager-register" id="ref-for-dom-periodicsyncmanager-register①①"><c- g>register</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a href="#dom-periodicsyncmanager-register-tag-options-tag"><code><c- g>tag</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-backgroundsyncoptions" id="ref-for-dictdef-backgroundsyncoptions①"><c- n>BackgroundSyncOptions</c-></a> <a href="#dom-periodicsyncmanager-register-tag-options-options"><code><c- g>options</c-></code></a>);
    <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-periodicsyncmanager-gettags" id="ref-for-dom-periodicsyncmanager-gettags①"><c- g>getTags</c-></a>();
    <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-periodicsyncmanager-unregister" id="ref-for-dom-periodicsyncmanager-unregister①"><c- g>unregister</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a> <a href="#dom-periodicsyncmanager-unregister-tag-tag"><code><c- g>tag</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-backgroundsyncoptions"><code><c- g>BackgroundSyncOptions</c-></code></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#EnforceRange" id="ref-for-EnforceRange①"><c- g>EnforceRange</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long-long" id="ref-for-idl-unsigned-long-long①"><c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-></a> <a data-default="0" data-type="unsigned long long " href="#dom-backgroundsyncoptions-mininterval"><code><c- g>minInterval</c-></code></a> = 0;
};

<c- b>dictionary</c-> <a href="#dictdef-periodicsynceventinit"><code><c- g>PeriodicSyncEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit" id="ref-for-dictdef-extendableeventinit①"><c- n>ExtendableEventInit</c-></a> {
    <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤①"><c- b>DOMString</c-></a> <a data-type="DOMString " href="#dom-periodicsynceventinit-tag"><code><c- g>tag</c-></code></a>;
};

[
    <a href="#dom-periodicsyncevent-periodicsyncevent"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥①"><c- b>DOMString</c-></a> <a href="#dom-periodicsyncevent-periodicsyncevent-type-init-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-periodicsynceventinit" id="ref-for-dictdef-periodicsynceventinit①"><c- n>PeriodicSyncEventInit</c-></a> <a href="#dom-periodicsyncevent-periodicsyncevent-type-init-init"><code><c- g>init</c-></code></a>),
    <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>ServiceWorker</c->
] <c- b>interface</c-> <a href="#periodicsyncevent"><code><c- g>PeriodicSyncEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#extendableevent" id="ref-for-extendableevent①①"><c- n>ExtendableEvent</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-periodicsyncevent-tag" id="ref-for-dom-periodicsyncevent-tag①"><c- g>tag</c-></a>;
  };

</pre>
  <aside class="dfn-panel" data-for="periodicsync-event-in-the-background">
   <b><a href="#periodicsync-event-in-the-background">#periodicsync-event-in-the-background</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodicsync-event-in-the-background">5.2. Location Tracking</a>
    <li><a href="#ref-for-periodicsync-event-in-the-background①">5.3. History Leaking</a>
    <li><a href="#ref-for-periodicsync-event-in-the-background②">6. Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-periodic-sync-registrations">
   <b><a href="#active-periodic-sync-registrations">#active-periodic-sync-registrations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-periodic-sync-registrations">4.2. Periodic Sync Scheduler</a> <a href="#ref-for-active-periodic-sync-registrations①">(2)</a>
    <li><a href="#ref-for-active-periodic-sync-registrations②">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-active-periodic-sync-registrations③">8.2. Respond to permission revocation</a> <a href="#ref-for-active-periodic-sync-registrations④">(2)</a>
    <li><a href="#ref-for-active-periodic-sync-registrations⑤">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-active-periodic-sync-registrations⑥">(2)</a> <a href="#ref-for-active-periodic-sync-registrations⑦">(3)</a> <a href="#ref-for-active-periodic-sync-registrations⑧">(4)</a> <a href="#ref-for-active-periodic-sync-registrations⑨">(5)</a>
    <li><a href="#ref-for-active-periodic-sync-registrations①⓪">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-processing-queue">
   <b><a href="#periodic-sync-processing-queue">#periodic-sync-processing-queue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-processing-queue">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-periodic-sync-processing-queue①">8.2. Respond to permission revocation</a>
    <li><a href="#ref-for-periodic-sync-processing-queue②">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodic-sync-processing-queue③">(2)</a> <a href="#ref-for-periodic-sync-processing-queue④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-registration">
   <b><a href="#periodic-sync-registration">#periodic-sync-registration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-registration">2. Concepts</a>
    <li><a href="#ref-for-periodic-sync-registration①">3. Extensions to service worker registration</a>
    <li><a href="#ref-for-periodic-sync-registration②">4.1. Periodic sync registration</a>
    <li><a href="#ref-for-periodic-sync-registration③">4.3. Constants</a>
    <li><a href="#ref-for-periodic-sync-registration④">5.1. Permission</a>
    <li><a href="#ref-for-periodic-sync-registration⑤">5.3. History Leaking</a> <a href="#ref-for-periodic-sync-registration⑥">(2)</a>
    <li><a href="#ref-for-periodic-sync-registration⑦">6. Security Considerations</a>
    <li><a href="#ref-for-periodic-sync-registration⑧">8.1. Process periodic sync registrations</a> <a href="#ref-for-periodic-sync-registration⑨">(2)</a>
    <li><a href="#ref-for-periodic-sync-registration①⓪">8.2. Respond to permission revocation</a>
    <li><a href="#ref-for-periodic-sync-registration①①">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodic-sync-registration①②">(2)</a> <a href="#ref-for-periodic-sync-registration①③">(3)</a>
    <li><a href="#ref-for-periodic-sync-registration①④">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-registration-service-worker-registration">
   <b><a href="#periodic-sync-registration-service-worker-registration">#periodic-sync-registration-service-worker-registration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-registration-service-worker-registration">2. Concepts</a>
    <li><a href="#ref-for-periodic-sync-registration-service-worker-registration①">4.2. Periodic Sync Scheduler</a>
    <li><a href="#ref-for-periodic-sync-registration-service-worker-registration②">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-periodic-sync-registration-service-worker-registration③">8.2. Respond to permission revocation</a>
    <li><a href="#ref-for-periodic-sync-registration-service-worker-registration④">9.3. PeriodicSyncManager interface</a>
    <li><a href="#ref-for-periodic-sync-registration-service-worker-registration⑤">9.4.1. Fire a periodicsync event</a> <a href="#ref-for-periodic-sync-registration-service-worker-registration⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-registration-tag">
   <b><a href="#periodic-sync-registration-tag">#periodic-sync-registration-tag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-registration-tag">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodic-sync-registration-tag①">(2)</a> <a href="#ref-for-periodic-sync-registration-tag②">(3)</a> <a href="#ref-for-periodic-sync-registration-tag③">(4)</a>
    <li><a href="#ref-for-periodic-sync-registration-tag④">9.4. The periodicsync event</a>
    <li><a href="#ref-for-periodic-sync-registration-tag⑤">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-registration-minimum-interval">
   <b><a href="#periodic-sync-registration-minimum-interval">#periodic-sync-registration-minimum-interval</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-registration-minimum-interval">4.1. Periodic sync registration</a>
    <li><a href="#ref-for-periodic-sync-registration-minimum-interval①">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-periodic-sync-registration-minimum-interval②">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodic-sync-registration-minimum-interval③">(2)</a> <a href="#ref-for-periodic-sync-registration-minimum-interval④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-registration-anchor-time">
   <b><a href="#periodic-sync-registration-anchor-time">#periodic-sync-registration-anchor-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-registration-anchor-time">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-periodic-sync-registration-anchor-time①">9.3. PeriodicSyncManager interface</a>
    <li><a href="#ref-for-periodic-sync-registration-anchor-time②">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-registration-state">
   <b><a href="#periodic-sync-registration-state">#periodic-sync-registration-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-registration-state">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-periodic-sync-registration-state①">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodic-sync-registration-state②">(2)</a> <a href="#ref-for-periodic-sync-registration-state③">(3)</a>
    <li><a href="#ref-for-periodic-sync-registration-state④">9.4.1. Fire a periodicsync event</a> <a href="#ref-for-periodic-sync-registration-state⑤">(2)</a> <a href="#ref-for-periodic-sync-registration-state⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-scheduler">
   <b><a href="#periodic-sync-scheduler">#periodic-sync-scheduler</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-scheduler">4.2. Periodic Sync Scheduler</a> <a href="#ref-for-periodic-sync-scheduler①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodic-sync-scheduler-time-of-last-fire">
   <b><a href="#periodic-sync-scheduler-time-of-last-fire">#periodic-sync-scheduler-time-of-last-fire</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodic-sync-scheduler-time-of-last-fire">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-periodic-sync-scheduler-time-of-last-fire①">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effective-minimum-sync-interval-for-origin">
   <b><a href="#effective-minimum-sync-interval-for-origin">#effective-minimum-sync-interval-for-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effective-minimum-sync-interval-for-origin">4.2. Periodic Sync Scheduler</a> <a href="#ref-for-effective-minimum-sync-interval-for-origin①">(2)</a>
    <li><a href="#ref-for-effective-minimum-sync-interval-for-origin②">6. Security Considerations</a>
    <li><a href="#ref-for-effective-minimum-sync-interval-for-origin③">8.1. Process periodic sync registrations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="minimum-periodic-sync-interval-for-any-origin">
   <b><a href="#minimum-periodic-sync-interval-for-any-origin">#minimum-periodic-sync-interval-for-any-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-minimum-periodic-sync-interval-for-any-origin">4.2. Periodic Sync Scheduler</a>
    <li><a href="#ref-for-minimum-periodic-sync-interval-for-any-origin①">4.3. Constants</a> <a href="#ref-for-minimum-periodic-sync-interval-for-any-origin②">(2)</a> <a href="#ref-for-minimum-periodic-sync-interval-for-any-origin③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="minimum-periodic-sync-interval-across-origins">
   <b><a href="#minimum-periodic-sync-interval-across-origins">#minimum-periodic-sync-interval-across-origins</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-minimum-periodic-sync-interval-across-origins">4.3. Constants</a> <a href="#ref-for-minimum-periodic-sync-interval-across-origins①">(2)</a> <a href="#ref-for-minimum-periodic-sync-interval-across-origins②">(3)</a> <a href="#ref-for-minimum-periodic-sync-interval-across-origins③">(4)</a>
    <li><a href="#ref-for-minimum-periodic-sync-interval-across-origins④">8.1. Process periodic sync registrations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="maximum-number-of-retries">
   <b><a href="#maximum-number-of-retries">#maximum-number-of-retries</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-maximum-number-of-retries">4.3. Constants</a>
    <li><a href="#ref-for-maximum-number-of-retries①">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="process-periodic-sync-registrations">
   <b><a href="#process-periodic-sync-registrations">#process-periodic-sync-registrations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-process-periodic-sync-registrations">4.2. Periodic Sync Scheduler</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="respond-to-permission-revocation">
   <b><a href="#respond-to-permission-revocation">#respond-to-permission-revocation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-respond-to-permission-revocation">8.2. Respond to permission revocation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="serviceworkerregistration-periodic-sync-manager">
   <b><a href="#serviceworkerregistration-periodic-sync-manager">#serviceworkerregistration-periodic-sync-manager</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serviceworkerregistration-periodic-sync-manager">9.2. Extensions to the ServiceWorkerRegistration interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-serviceworkerregistration-periodicsync">
   <b><a href="#dom-serviceworkerregistration-periodicsync">#dom-serviceworkerregistration-periodicsync</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-serviceworkerregistration-periodicsync">9.2. Extensions to the ServiceWorkerRegistration interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodicsyncmanager">
   <b><a href="#periodicsyncmanager">#periodicsyncmanager</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodicsyncmanager">9.2. Extensions to the ServiceWorkerRegistration interface</a> <a href="#ref-for-periodicsyncmanager①">(2)</a> <a href="#ref-for-periodicsyncmanager②">(3)</a>
    <li><a href="#ref-for-periodicsyncmanager③">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodicsyncmanager④">(2)</a> <a href="#ref-for-periodicsyncmanager⑤">(3)</a> <a href="#ref-for-periodicsyncmanager⑥">(4)</a> <a href="#ref-for-periodicsyncmanager⑦">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-backgroundsyncoptions">
   <b><a href="#dictdef-backgroundsyncoptions">#dictdef-backgroundsyncoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-backgroundsyncoptions">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-backgroundsyncoptions-mininterval">
   <b><a href="#dom-backgroundsyncoptions-mininterval">#dom-backgroundsyncoptions-mininterval</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-backgroundsyncoptions-mininterval">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-dom-backgroundsyncoptions-mininterval①">(2)</a> <a href="#ref-for-dom-backgroundsyncoptions-mininterval②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodicsyncmanager-service-worker-registration">
   <b><a href="#periodicsyncmanager-service-worker-registration">#periodicsyncmanager-service-worker-registration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodicsyncmanager-service-worker-registration">9.2. Extensions to the ServiceWorkerRegistration interface</a>
    <li><a href="#ref-for-periodicsyncmanager-service-worker-registration①">9.3. PeriodicSyncManager interface</a> <a href="#ref-for-periodicsyncmanager-service-worker-registration②">(2)</a> <a href="#ref-for-periodicsyncmanager-service-worker-registration③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-periodicsyncmanager-register">
   <b><a href="#dom-periodicsyncmanager-register">#dom-periodicsyncmanager-register</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-periodicsyncmanager-register">6. Security Considerations</a>
    <li><a href="#ref-for-dom-periodicsyncmanager-register①">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-periodicsyncmanager-gettags">
   <b><a href="#dom-periodicsyncmanager-gettags">#dom-periodicsyncmanager-gettags</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-periodicsyncmanager-gettags">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-periodicsyncmanager-unregister">
   <b><a href="#dom-periodicsyncmanager-unregister">#dom-periodicsyncmanager-unregister</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-periodicsyncmanager-unregister">9.3. PeriodicSyncManager interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodicsync-event">
   <b><a href="#periodicsync-event">#periodicsync-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodicsync-event">1.1. Example</a>
    <li><a href="#ref-for-periodicsync-event①">2. Concepts</a>
    <li><a href="#ref-for-periodicsync-event②">4.1. Periodic sync registration</a> <a href="#ref-for-periodicsync-event③">(2)</a>
    <li><a href="#ref-for-periodicsync-event④">4.2. Periodic Sync Scheduler</a> <a href="#ref-for-periodicsync-event⑤">(2)</a> <a href="#ref-for-periodicsync-event⑥">(3)</a>
    <li><a href="#ref-for-periodicsync-event⑦">4.3. Constants</a> <a href="#ref-for-periodicsync-event⑧">(2)</a> <a href="#ref-for-periodicsync-event⑨">(3)</a> <a href="#ref-for-periodicsync-event①⓪">(4)</a>
    <li><a href="#ref-for-periodicsync-event①①">5.1. Permission</a>
    <li><a href="#ref-for-periodicsync-event①②">5.2. Location Tracking</a> <a href="#ref-for-periodicsync-event①③">(2)</a> <a href="#ref-for-periodicsync-event①④">(3)</a>
    <li><a href="#ref-for-periodicsync-event①⑤">5.3. History Leaking</a> <a href="#ref-for-periodicsync-event①⑥">(2)</a> <a href="#ref-for-periodicsync-event①⑦">(3)</a> <a href="#ref-for-periodicsync-event①⑧">(4)</a>
    <li><a href="#ref-for-periodicsync-event①⑨">6. Security Considerations</a> <a href="#ref-for-periodicsync-event②⓪">(2)</a> <a href="#ref-for-periodicsync-event②①">(3)</a> <a href="#ref-for-periodicsync-event②②">(4)</a> <a href="#ref-for-periodicsync-event②③">(5)</a> <a href="#ref-for-periodicsync-event②④">(6)</a>
    <li><a href="#ref-for-periodicsync-event②⑤">7. Resource Usage</a> <a href="#ref-for-periodicsync-event②⑥">(2)</a>
    <li><a href="#ref-for-periodicsync-event②⑦">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-periodicsynceventinit">
   <b><a href="#dictdef-periodicsynceventinit">#dictdef-periodicsynceventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-periodicsynceventinit">9.4. The periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodicsyncevent">
   <b><a href="#periodicsyncevent">#periodicsyncevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodicsyncevent">6. Security Considerations</a> <a href="#ref-for-periodicsyncevent①">(2)</a>
    <li><a href="#ref-for-periodicsyncevent②">9.4. The periodicsync event</a>
    <li><a href="#ref-for-periodicsyncevent③">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="periodicsyncevent-tag">
   <b><a href="#periodicsyncevent-tag">#periodicsyncevent-tag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-periodicsyncevent-tag">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-periodicsyncevent-tag">
   <b><a href="#dom-periodicsyncevent-tag">#dom-periodicsyncevent-tag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-periodicsyncevent-tag">9.4. The periodicsync event</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fire-a-periodicsync-event">
   <b><a href="#fire-a-periodicsync-event">#fire-a-periodicsync-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fire-a-periodicsync-event">8.1. Process periodic sync registrations</a>
    <li><a href="#ref-for-fire-a-periodicsync-event①">9.4.1. Fire a periodicsync event</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>